-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CustomSelectControl: switch to ariakit-based implementation #63258
Conversation
9d6ae25
to
d9a99ee
Compare
Size Change: -7.75 kB (-0.44%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
CustomSelectControl
: switch to ariakit-based implementation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
CustomSelectControl
: switch to ariakit-based implementationThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good! This folder structure feels correct to me too 👍
1ae412e
to
639bec6
Compare
Thank you for the feedback. I'll have a final round of smoking tests and merge tomorrow |
…s#63258) * Remove V1-related code * Move files over from v2 folder * Update Storybook files * Fix imports & exports * Remove mentions of downshift * Remove downshift dependency * Import directly from components package instead of private APIs * Move V2 implementation out of /default-component subfolder * Add back legacy classnames * Move V1 types to V1 folder * CHANGELOG * Remove "Legacy" from V1 types * Update and align README and JSDocs * apply feedback * apply feedback * Updated CHANGELOG --------- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @ciampo and @mirka, I just noticed that the font appearance control is sitting at a different position vertically than all the other controls in the Typography panel now. Could that have been caused by this PR? It seems a possible candidate, but I haven't done a detailed look into other recent changes to this component. Here's a quick screenshot of how it's looking in trunk
:
Note that the Appearance label sits lower than Line Height along with its select box.
I've opened an issue over in #63886.
What?
Part of #55023
Replace the legacy,
downshift
-based implementation ofCustomSelectControl
, with the newariakit
-based implementation. The public APIs of the component shouldn't be affected.Why?
For a few reasons:
downshift
as a dependency of the projectSee #55023 for more info.
How?
Note
For now, the new
ariakit
V1 imports base components and styles from the V2. As we further the development of the V2 version, we may have to "duplicate" this code so that the V1 implementation becomes standalone, and the V2 can diverge without worrying about repercussions on V1.Testing Instructions
I recommend reviewing this PR commit-by-commit to minimize the noise
downshift
orCustomSelectControlV2
outside of the source folders✍️ Dev note
The
CustomSelectControl
component has been completely rewritten usingariakit
. Notably, this refactor enables the removal of thedownshift
library as a dependency of the Gutenberg repository, causing a~7.75 kB
decrease for the@wordpress/components
package bundle size.While there are no breaking changes to the component public APIs, the refactor also allowed us to make a few improvements to the component:
combobox
role instead ofbutton
, in line with the WAI-ARIA specs;__experimentalShowSelectedHint
andoptions[]. __experimentalHint
props have been unprefixed and stabilized;max-height
hasn't changed, the popover's height adapts to the available space, without causing extra overflow on the page;